<template>
	<!-- 个人中心 -->
	<view class="user">
		<view class="header">
			<view class="user-wrap" @click="fnToPersonal()">
				<image :src="userInfo.avatar" mode="" class="avatar" v-if="hasLogin"></image>
				<image src="../../static/common/head-portrait.png" mode="" class="avatar" v-else></image>
				<view class="text-wrap" v-if="hasLogin">
					<view class="text">
						<view class="phone">{{userInfo.nickname || '请设置昵称'}}</view>
						<text>粉丝:0人</text><text>关注:0人</text>
					</view>
					<image class="edit" src="../../static/user/information.png" mode=""></image>
				</view>
				<view class="flex-c text-wrap" v-else>
					<view class="text">
						<view class="phone">去登录</view>
						<text>粉丝:0人</text><text>关注:0人</text>
					</view>
				</view>
			</view>
		</view>
		<view class="account">
			<view class="details" @click="fnToAccountDetail()">账户明细></view>
			<view class="moneyBox flex-col-ac"><text class="money">{{total_balance}}</text><text class="money-text">账户总额(元)</text></view>

			<view class="btn-wrap">
				<view class="btn" @click="fnRecharge(0)">
					<image class="img" src="../../static/user/recharge.png" mode=""></image><text>充值</text>
				</view>
				<view class="btn" @click="fnRecharge(1)">
					<image class="img" src="../../static/user/withdrawal.png" mode=""></image><text>提现</text>
				</view>
			</view>
		</view>
		<view class="title">
			<text class="icon"></text><text class="text">我的服务</text>
		</view>
		<view class="service">
			<view class="item" @click="fnToMyService(item.url)" v-for="(item,index) in myService" :key="index">
				<image class="img" :src="item.src" mode=""></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="title">
			<text class="icon"></text><text class="text">更多服务</text>
		</view>
		<view class="more">
			<view class="item" v-for="(item,index) in more_list" :key="index" @click="fnToMoreService(item.url)">
				<image class="img" :src="item.img" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view class="footholder"></view>
		<!-- #endif -->
		<uni-popup ref="popup" type="share" :mask-click="false">
			<uni-popup-share @select="select"></uni-popup-share>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupShare from '@/components/uni-popup-share/uni-popup-share.vue'
	export default {
		components: {
			uniPopupShare,
			uniPopup
		},
		data() {
			return {
				hasLogin: false,
				avatar: '',
				mobile: '',
				nickname: '请设置昵称',
				userInfo: uni.getStorageSync('userInfo'),
				total_balance: '0.00',
				select: '',
				myService: [{
						title: '我的关注',
						src: '../../static/user/focus.png',
						url: '../packageA/focus/focus'
					},
					{
						title: '我的消息',
						src: '../../static/user/message.png',
						url: '../packageA/message/message'
					},
					{
						title: '我的红包',
						src: '../../static/user/red-envelope.png',
						url: '../packageA/redbag/redbag'
					}
				],
				more_list: [{
						img: "../../static/user/records.png",
						name: "购彩记录",
						url: '../packageA/buyRecord/buyRecord'
					},
					{
						img: "../../static/user/scheme-query.png",
						name: "方案查询",
						url: '../packageA/caseSearch/caseSearch'
					},
					{
						img: "../../static/user/promote-store.png",
						name: "推广本店",
						url: ''
					},
					{
						img: "../../static/user/using-tutorials.png",
						name: "使用教程",
						url: '../packageA/useLesson/useLesson'
					},
					{
						img: "../../static/user/security-center.png",
						name: "安全中心",
						url: '../packageA/safeCenter/safeCenter'
					},
					{
						img: "../../static/user/push-settings.png",
						name: "推送设置",
						url: '../packageA/pushSetting/pushSetting'
					},
					{
						img: "../../static/user/more-options.png",
						name: "更多选项",
						url: '../packageA/more/more'
					},
				]
			}
		},
		onShow() {
			this.hasLogin = this.$Store.getters.hasLogin
			console.log(this.hasLogin);
			if (!this.hasLogin) {
				this.resetSectionData()
			} else {
				this.getAllData()
			}
		},
		methods: {
			fnIsToLogin() {
				var that = this
				uni.showModal({
					content: '确定要登录吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showToast({
								title: '正在跳转登录',
								icon: 'none'
							})
							setTimeout(function() {
								uni.navigateTo({
									url: '../packageA/login/login'
								})
							}, 1500)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			fnRecharge(type) {
				var url = '../packageB/recharge/recharge'
				if (type) {
					url = '../packageB/withdraw/withdraw'
				}
				if (!this.hasLogin) {
					this.fnIsToLogin()
				} else {
					uni.navigateTo({
						url: url
					})
				}

			},
			fnToLogin() {
				uni.navigateTo({
					url: '../packageA/login/login'
				})
			},
			fnToPersonal() {
				if (!this.hasLogin) {
					this.fnIsToLogin()
				} else {
					uni.navigateTo({
						url: `/pages/packageA/personalData/personalData?nickname=${this.nickname}&avatar=${this.avatar}`
					})
				}
			},
			fnToAccountDetail() {
				if (!this.hasLogin) {
					this.fnIsToLogin()
				} else {
					uni.navigateTo({
						url: '../packageA/account-detail/account-detail'
					})
				}

			},
			fnToMyService(url) {
				if (!this.hasLogin) {
					this.fnIsToLogin()
				} else {
					uni.navigateTo({
						url: url
					})
				}

			},
			fnToMoreService(url) {
				if (url) {
					if (!this.hasLogin) {
						this.fnIsToLogin()
					} else {
						uni.navigateTo({
							url: url
						})
					}

				} else {
					if (!this.hasLogin) {
						this.fnIsToLogin()
					} else {
						this.fnOpenShare()
					}
				}
			},
			fnOpenShare() {
				// this.$refs.popup.open()
				// wx.hideTabBar();
			},
			getAllData() {
				this.request({
					url: '/czb/User/getUserInfo',
					method: 'POST',
					data: {
						'token': uni.getStorageSync('token'),
						'store_id': 1
					},
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) {

					}
					// if(ret.code == 96 || ret.code == 99) {
					// 	this.resetSectionData()
					// 	this.$Store.commit('logout')
					// 	uni.showModal({
					// 		content: ret.message,
					// 		success: (confirmRes) => {
					// 		    if (confirmRes.confirm) {
					// 				Vue.prototype.$openPages = '/pages/user/user'
					// 		        uni.navigateTo({ url: '/pages/packageA/login/login' })
					// 		    }
					// 		}
					// 	})
					// 	return;
					// }
					// if(ret.code == 98) {
					// 	this.resetSectionData()
					// 	this.$Store.commit('logout')
					// 	uni.showModal({
					// 		content: ret.message + ',尝试重新登录',
					// 		success: (confirmRes) => {
					// 		    if (confirmRes.confirm) {
					// 				Vue.prototype.$openPages = '/pages/user/user'
					// 		        uni.navigateTo({ url: '/pages/packageA/login/login' })
					// 		    }
					// 		}
					// 	})
					// 	return;
					// }
					// uni.hideLoading();
					var data = ret.data;
					this.avatar = data.avatar;
					this.mobile = data.mobile;
					this.total_balance = data.total_balance;
					this.nickname = data.nickname
					// this.invite_code = data.user.invite_code;
					// this.hasRequested = true // 显示邀请码
					// this.foot = data.foot;
					// this.integral = data.integral;
					// this.collect = data.collect;
					// this.avatar = data.user.avatar;

					// const { avatar, nickname } = data.user
					const userInfo = {
						'avatar': data.avatar,
						'nickname': data.nickname,
						'mobile': data.mobile
					}
					this.userInfo = userInfo
					this.$Store.commit('setUserInfo', userInfo)
				})
			},
			resetSectionData() {
				this.total_balance = '0.00'
				console.log(this.hasLogin)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.title {
		margin: 30rpx auto;
		padding-left: 26rpx;
		box-sizing: border-box;

		.icon {
			display: inline-block;
			width: 7rpx;
			height: 22rpx;
			background: linear-gradient(119deg, #FF9478, #ED555E);
			border-radius: 4rpx;
			margin-right: 10rpx;
		}

		.text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	.header {
		height: 460rpx;
		background: linear-gradient(180deg, #F22F29, #FC6655, #F8F9FD);
		border-radius: 0px 0px 30rpx 30rpx;
		padding: 100rpx 25rpx 0 25rpx;
		box-sizing: border-box;

		.user-wrap {
			display: flex;
			align-items: center;
			width: 100%;

			.avatar {
				display: block;
				width: 144rpx;
				height: 144rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}

			.text-wrap {
				height: 100rpx;
				flex: 1;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				font-family: PingFang SC;
				color: #FFFFFF;

				.phone {
					font-size: 36rpx;
					font-weight: bold;
				}

				text {
					display: inline-block;
					font-size: 24rpx;
					font-weight: 500;
					width: 131rpx;
					height: 45rpx;
					background: rgba(0, 0, 0, 0.1);
					border-radius: 23rpx;
					text-align: center;
					line-height: 45rpx;
					margin-right: 10rpx;
				}

				.edit {
					display: block;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.account {
		box-shadow: 0px 15rpx 20rpx 0px rgba(0, 0, 0, 0.02);
		width: 710rpx;
		height: 271rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: -130rpx auto 0 auto;
		text-align: center;
		padding: 0.25rem;
		box-sizing: border-box;
		position: relative;

		.details {
			position: absolute;
			top: 0;
			right: 0;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FC6655;
			padding: 20rpx;
		}

		.moneyBox {
			margin-top: 40rpx;

			.money {
				font-size: 50rpx;
				font-family: DIN;
				font-weight: bold;
				color: #333333;
			}

			.money-text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}

		.btn-wrap {
			position: absolute;
			left: 31rpx;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 628rpx;
			height: 97rpx;
			border-top: 1rpx solid #F3F3F3;

			.btn {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.img {
			display: inline-block;
			width: 44rpx;
			height: 44rpx;
			margin-right: 9rpx;
		}
	}

	.service {
		box-shadow: 0px 15rpx 20rpx 0px rgba(0, 0, 0, 0.02);
		width: 710rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;

		.item {
			width: 33.33%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.img {
				display: block;
				width: 56rpx;
				height: 56rpx;
			}

			text {
				margin-top: 16rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}

	.more {
		width: 710rpx;
		height: 306rpx;
		background: #FFFFFF;
		box-shadow: 0px 15rpx 20rpx 0px rgba(0, 0, 0, 0.02);
		border-radius: 20rpx;
		margin: 0 auto 20rpx;
		padding: 20rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;

		.item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 20rpx 0;

			.img {
				display: block;
				width: 56rpx;
				height: 56rpx;
			}

			text {
				margin-top: 16rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}

	/*  #ifdef  H5  */
	.footholder {
		width: 100%;
		height: var(--window-bottom);
	}

	/*  #endif  */
</style>
